import React from 'react'
import {connect} from 'dva';
import { Button, Modal, Form, Input, Radio,Cascader,message,Select  } from 'antd';
import {PLATFORM_NUMBER} from "../../../enum"

const platformNumber=PLATFORM_NUMBER.SUPPLIER_USER
const FormItem = Form.Item;

@connect(({cooperativeStore})=>({
  Refresh:cooperativeStore.refrenshList,
  roleArr:cooperativeStore.RoleByUserId,
}))
class AddAccount extends React.Component{
    state={
        cooper:[],
        visible: false
      }
      
      //查询角色
      showModal = () => {
        this.setState({
          visible: true,
        });
      };
    
      handleOk = e => {
        console.log(e);
        this.setState({
          visible: true,
        });
      };
      aaa=()=>{
        alert(11111)
        this.setState({
          visible: false,
        });
      }
      handleCancel = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };





      
    handleSubmit = () => {
        let userInfo = this.props.form.getFieldsValue();
        // userInfo["userId"]=1
        console.log("1111",userInfo)
        this.props.form.validateFields((err,values)=>{

          if(!err){
            const { dispatch } = this.props;
            dispatch({
              type:'cooperativeStore/addSysUser',
              payload:{
                data:{
                  "email": userInfo.email,
                  "mobile":userInfo.mobile,
                  "name": userInfo.name,
                  "parentId": 0,
                  "password": "Abc123456",
                  "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                  "roleId": userInfo.roleId,
                  "username": userInfo.username
                }
              }
            }).then(res=>{
              if(res.code=200){
                message.success(res.msg)
                this.props.form.resetFields();
              }else{
                message.error(res.msg)
              }
            })
          }
        })  
        this.setState({ visible: false, })
     };
    render() {
      function handleChange(value) {
        console.log(`selected ${value}`);
    }
      const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout ={
          labelCol:{
            xs:24,
            sm:8
          },
          wrapperCol:{
            xs:24,
            sm:12
          }
        }
        // const renderOption = (arr , code , name) => arr ?  arr.map( (item,index)=>{
        //   return (<Option key={index+item[code]} value={ typeof(item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
        //   }) : null

        
          const {cooper}=this.state;
          const {roleArr}=this.props
        return (

          <div>
        <Button icon onClick={this.showModal}>+添加人员</Button>
        
        <Modal
          title="添加子账号"
          visible={this.state.visible}
          onOk={this.handleSubmit}
          onCancel={this.handleCancel}
        >
          <Form layout={"horizontal"} onSubmit={this.handleSubmit}>
                <FormItem label="账号" {...formItemLayout}>
                  {
                    getFieldDecorator('username', {
                      initialValue:"",
                      rules: [{ required: true, message: '请填写账号!' }],
                  })(<Input />)}
                </FormItem>
                <FormItem label="姓名" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                      initialValue:"",
                      rules: [{ required: true, message: '请填写姓名!' }],
                  })(<Input />)}
                </FormItem>
                <FormItem label="邮箱" {...formItemLayout}>
                  {
                    getFieldDecorator('email', {
                      initialValue:"",
                      rules: [
                        { required: true, message: '请填写邮箱!' },
                        {pattern:RegExp(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/),message:'请填写正确的邮箱！'}
                      ],
                  })(<Input />)}
                </FormItem>
                <FormItem label="电话" {...formItemLayout}>
                  {
                    getFieldDecorator('mobile', {
                      initialValue:"",
                      rules: [
                        { required: true, message: '请填写电话!' },
                        {pattern:RegExp(/^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/),message:'请填写正确的手机号码！'}
                      ],
                  })(<Input />)}
                </FormItem>
                <FormItem label="角色分组" {...formItemLayout}>
                  {
                    getFieldDecorator('roleId', {
                      initialValue:"",
                      rules: [{ required: true, message: '请填写角色分组!' }],
                  })(
                    <Select placeholder="选择角色分组" style={{ width: 236 }}>
                      {roleArr.map(it => (
                        <Select.Option key={it.roleId} value={it.roleId}>
                          {it.roleName}
                        </Select.Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Form>
        </Modal>
      </div>
        );
    }
}
export default Form.create()(AddAccount);